class MyTable {
    constructor(root, arr, options = {}) {
        this.root = root;
        this.arr = arr;
        this.pageArr = null;

        this.options = {
            useDefaultLayout:
                options.useDefaultLayout != undefined
                    ? options.useDefaultLayout
                    : true,
            pageNum: options.pageNum || 20,
            thead: options.thead,
        };

        // 渲染DOM结构
        if (this.options.useDefaultLayout) {
            this.renderDOM();
        }

        // 找出所有元素
        this.findElements();

        // 默认翻到第一页
        this.turnToPage(1);
    }

    /* 找出所有元素 */
    findElements() {
        this.tbody = this.root.querySelector("tbody");
    }

    /* 渲染样式 */
    renderStyle() {
        const cssStr = `
* {
margin: 0;
padding: 0;
}

.container {
width: 800px;
height: 40px;
border: 1px solid #333;
margin: 30px auto;
}

table {
width: 800px;
margin: 0 auto;
text-align: center;
}

tbody>tr:nth-child(odd) {
background-color: pink;
}

tbody>tr:nth-child(even) {
background-color: skyblue;
}

tbody>tr:hover {
background-color: #ccc;
}
`;
        applyCss(this.root, cssStr);
    }

    /* 渲染表格的DOM结构 */
    renderDOM() {
        let ths = "";

        // 如果配置中的thead项不存在（假-undefined）
        if (!this.options.thead) {
            /* 根据数据项的属性动态渲染th */
            // 拿出第一条数据
            const item = this.arr[0];

            // 遍历其属性
            for (let attr in item) {
                // 每个属性名造一个th并填充属性名
                ths += `<th>${attr}</th>`;
            }
            console.log(ths);
        } else {
            this.options.thead.forEach((name) => (ths += `<th>${name}</th>`));
        }

        this.root.innerHTML = `
<table border="1" cellspacing="0">
<thead>
<tr>${ths}</tr>
</thead>
<tbody>
    <!-- <tr>
        <td>1</td><td>tom</td><td>20</td><td>male</td><td>删除</td>
    </tr> -->
</tbody>
</table>
`;
    }

    /* 渲染数据 */
    renderData() {
        // 清空tbody
        this.tbody.innerHTML = "";

        /* 遍历学生数组 */
        this.pageArr.forEach(
            /* 为每个学生造一个tr 丢入tbody */
            (item, index) => {
                /* 为每个学生造一个tr 丢入tbody */
                const tr = document.createElement("tr");
                this.tbody.appendChild(tr);

                /* 每个学生有几个属性 就造几个td 丢入tr */
                for (let attr in item) {
                    const td = document.createElement("td");
                    tr.appendChild(td);

                    // td中的文字为当前属性值
                    td.innerText = item[attr];
                }
            }
        );

        // 应用样式
    }

    /* 翻页功能 */
    turnToPage(n) {
        // 从整体数据中截取一部分 n=5 [41,50]
        this.pageArr = this.arr.slice((n - 1) * 10, n * 10);

        // 渲染数据：渲染pageArr
        this.renderData();

        // 应用样式：DOM元素是动态造出来的 得动态添加样式
        this.options.useDefaultLayout && this.renderStyle();
    }
}
